.main{
  height: 998px;
}
.main-c{
  width: 1224px;
  height: 100%;
  margin: 0 auto;
}
.main .title{
  margin-top: 99px;
}
.main .title .cn{
  font-size: 22px;
  color: #323232;
}
.main .title .en{
  font-size: 16px;
  color: #b7b1b1;
}

.main .card{
  float: left;
  width: 565px;
  height: 250px;
  margin-right: 94px;
  margin-top: 69px;
}
.main .card .img{
  float: left;
  width: 350px;
  height: 250px;
  overflow: hidden;
  position: relative;
}
.main .card1 .img{
  float: left;
  width: 350px;
  height: 250px;
  overflow: hidden;
  position: relative;
}
.main .card .desc{
  float: right;
  margin-left: 25px;
}
.main .desc .name{
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
  color: #3a3a3a;
}
.main .desc .price{
  font-size: 14px;
  color: #727171;
}
.main .desc span{
  width: 44px;
  height: 20px;
  border: 1px solid #b5b5b5;
  color: #474646;

}
.main .desc p{
  margin-top: 34px;
  font-size: 14px;
  color: #727171;
}
.img .t{
  position: absolute;
  top: 31px;
  left: 20px;
  width: 309px;
  height: 190px;
  border: 2px solid #04e4f8;
  opacity: 0;
  transition: 0.7s;
}
.img .mask{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,.4);
  transition: 0.7s;
}
.card:hover .mask{
  opacity: 1;
  cursor: pointer;
}
.card:hover .t{
  opacity: 1;
}
.card1:hover .mask{
  opacity: 1;
  cursor: pointer;
}
.card1:hover .t{
  opacity: 1;
}
.main .card1{
  float: left;
  width: 565px;
  height: 250px;
  margin-right:0;
  margin-top: 69px;
  position: relative;
}
 .main .card1 .desc{
  float: right;
  margin-left: 25px;
}

